<script setup lang="ts">
import { getAdministrationList } from '@/service/api/sys/dataWarehouse/countryData'
import Area from './components/area.vue'
import Population from '@/views/dynamic/system/dataWarehouse/countryData/components/population.vue'
import AssetData from '@/views/dynamic/system/dataWarehouse/countryData/components/assetData.vue'
import AssetManage from '@/views/dynamic/system/dataWarehouse/countryData/components/assetManage.vue'
import AssetSummary from '@/views/dynamic/system/dataWarehouse/countryData/components/assetSummary.vue'
import AssetTrend from '@/views/dynamic/system/dataWarehouse/countryData/components/assetTrend.vue'

const administration = ref([]) // 行政组织列表
const filtterForm = ref({
  govOrgId: 1,
  year: 2023
}) // 条件筛选对象
const govOrgId = ref(1)

watch(
  govOrgId,
  (value: any) => {
    filtterForm.value.govOrgId = value[value.length - 1] || 0
  },
  { immediate: true }
)

const getAdministration = async () => {
  const res = await getAdministrationList()
  administration.value = res.data
}

onMounted(() => {
  getAdministration()
})
</script>

<template>
  <div class="flex h-full flex-col">
    <div class="flex flex-row-reverse">
      <div class="flex items-center">
        <span class="mr-3 text-xs text-[--auxiliary]">选择年份</span>
        <el-date-picker
          v-model="filtterForm.year"
          type="year"
          placeholder="请选择年份"
          value-format="YYYY"
          format="YYYY"
        />
      </div>
      <div class="mr-10 flex items-center">
        <span class="mr-3 text-xs text-[--auxiliary]">组织</span>
        <el-cascader
          v-model="govOrgId"
          :options="administration"
          :show-all-levels="false"
          placeholder="请选择组织"
          :props="{
            value: 'id',
            label: 'name',
            children: 'childrenList'
            /* checkStrictly: true */
          }"
          clearable
        />
      </div>
    </div>
    <div class="grid flex-1 grid-cols-3 grid-rows-2 gap-5 pt-5">
      <!--区域概况-->
      <Area :filterRule="filtterForm" />
      <!--人口结构-->
      <population :filterRule="filtterForm" />
      <!--资产概况-->
      <asset-data :filterRule="filtterForm" />
      <!--资产管理-->
      <asset-manage :filterRule="filtterForm" />
      <!--产值汇总-->
      <asset-summary :filterRule="filtterForm" />
      <!--产值趋势-->
      <asset-trend :filterRule="filtterForm" />
    </div>
  </div>
</template>

<style scoped></style>
